import React, {useCallback, useEffect, useState} from 'react';
import { List, Button, Input } from 'antd';
import { observer } from 'mobx-react';
import environmentStore from "../store/environmentStore";
import EnvironmentEdit from "./EnvironmentEdit";
import IconCommon from "../../../common/IconCommon";

const EnvList = ({ selectedEnvId, onSelect }) => {
    const {findEnvironmentList, updateEnvironment} = environmentStore;
    const [envList, setEnvList] = useState([]);
    const [editingId, setEditingId] = useState(null);
    const [editingName, setEditingName] = useState('');
    const workspaceId = localStorage.getItem('workspaceId');

    const findList = useCallback(async () => {
        let list = await findEnvironmentList({workspaceId: workspaceId});
        if(list&&list.length>0){
            setEnvList(list)
            onSelect(list[0].id)
        }
    }, [workspaceId]);

    useEffect(() => {
       findList()
    }, []);

    const handleEdit = (item) => {
        setEditingId(item.id);
        setEditingName(item.name);
    };

    const handleNameChange = (e) => {
        setEditingName(e.target.value);
    };

    const handleNameBlur = async () => {
        if (editingId && editingName) {
            await updateEnvironment({
                id: editingId,
                name: editingName
            });
            await findList();
        }
        setEditingId(null);
    };

    const handleKeyPress = (e) => {
        if (e.key === 'Enter') {
            handleNameBlur();
        }
    };

    return (
        <div className="pi-env-list">
            <List
                dataSource={envList}
                renderItem={item => (
                    <List.Item
                        className={`env-list-item ${selectedEnvId === item.id ? 'selected' : ''}`}
                        onClick={() => onSelect(item.id)}
                    >
                        <div className="env-list-item-content" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
                            {editingId === item.id ? (
                                <Input
                                    value={editingName}
                                    onChange={handleNameChange}
                                    onBlur={handleNameBlur}
                                    onKeyPress={handleKeyPress}
                                    autoFocus
                                    style={{ width: '100%' }}
                                />
                            ) : (
                                <>
                                    <span>{item.name}</span>
                                    <IconCommon
                                        icon={"bianji11"}
                                        className={"icon-s edit-icon"}
                                        onClick={(e) => {
                                            e.stopPropagation();
                                            handleEdit(item);
                                        }}
                                        style={{ 
                                            marginLeft: '8px',
                                            cursor: 'pointer',
                                            opacity: 0.6,
                                            transition: 'opacity 0.3s'
                                        }}
                                        onMouseEnter={(e) => e.currentTarget.style.opacity = 1}
                                        onMouseLeave={(e) => e.currentTarget.style.opacity = 0.6}
                                    />
                                </>
                            )}
                        </div>
                    </List.Item>
                )}
            />
            <EnvironmentEdit
                type={"add"}
                findList={findList}
                modal={true}
            />
        </div>
    );
};

export default observer(EnvList); 